import { TreasuryGoodsChangeModeOptions } from "@/types";
import { Card, DatePicker, Form, ImagePicker, PrimaryButton, SelectPicker, TextArea, TextInput, TimePicker } from "@/ui-components";
import { View } from "@tarojs/components";
import to from "await-to-js";
import dayjs from "dayjs";
import { useAppSelector } from "@/store/hooks";
import { useState } from "react";
import Taro from "@tarojs/taro";
import { TreasuryGoodsParams, createTreasuryGoods } from "../../network";


interface TreasuryGoodsState extends Partial<TreasuryGoodsParams> {
  startDate?: string;
  startDateTime?: string;
}

const canNext = (goods: TreasuryGoodsState) => {
  return goods.name && goods.image && goods.score && goods.totalCount && goods.changeMode && goods.startDate && goods.startDateTime
}

const onPressNext = async (goods: TreasuryGoodsState, treasuryId: number) => {
  goods.startTime = dayjs(`${goods.startDate} ${goods.startDateTime}`).format('YYYYMMDDHHmmss')
  goods.treasuryId = treasuryId
  const [error] = await to(createTreasuryGoods(goods as TreasuryGoodsParams))
  if (error) {
    Taro.showToast({ title: error.message || '发布失败，请稍后重试', icon: 'none' })
    return
  }
  Taro.showToast({ title: '发布成功', icon: 'success' })
  Taro.navigateBack()
}


export default function TreasuryGoodsCreatePage() {

  const [goods, setGoods] = useState<TreasuryGoodsState>({})
  const treasuryId = useAppSelector(state => state.treasury.userTreasury.treasuryId)

  return (
    <View className='treasury-goods-create'>
      <Card>
        <Form>
          <TextInput
            label='商品名称'
            placeholder='请输入商品名称'
            value={goods.name}
            onChange={name => setGoods({ ...goods, name })}
          />
          <ImagePicker
            images={goods.image ? [goods.image] : []}
            onChange={images => setGoods({ ...goods, image: images[0] })}
            title='商品图标'
            count={1}
          />
          <TextInput
            type='number'
            label='商品价值'
            placeholder='请输入兑换商品所需积分'
            value={String(goods.score || '')}
            onChange={score => setGoods({ ...goods, score: Number(score) })}
          />
          <TextInput
            type='number'
            label='商品库存'
            placeholder='请输入商品库存'
            value={String(goods.totalCount || '')}
            onChange={totalCount => setGoods({ ...goods, totalCount: Number(totalCount) })}
          />
        </Form>
      </Card>
      <Card>
        <Form>
          <SelectPicker
            label='兑换限制'
            placeholder='请选择兑换限制'
            options={TreasuryGoodsChangeModeOptions}
            value={goods.changeMode}
            onChange={changeMode => setGoods({ ...goods, changeMode })}
          />
        </Form>
        <DatePicker
          label='开始日期'
          placeholder='请选择放开兑换日期'
          value={goods.startDate}
          onChange={startDate => setGoods({ ...goods, startDate })}
        />
        <TimePicker
          label='开始时间'
          placeholder='请选择放开兑换时间'
          value={goods.startDateTime}
          onChange={startDateTime => setGoods({ ...goods, startDateTime })}
        />
        <TextArea
          label='兑换留言'
          placeholder='请输入兑换留言(选填)'
          value={goods.exchangeNote}
          onChange={exchangeNote => setGoods({ ...goods, exchangeNote })}
        />
      </Card>
      <PrimaryButton
        text='发布商品'
        disabled={!canNext(goods)}
        onClick={() => onPressNext(goods, treasuryId)}
      />
    </View>
  )
}
